import React from 'react'
import {Card,Button, Spin, Icon, Alert} from 'antd'
import './ui.less'


export default class Loadings extends React.Component{
    render(){
        const icon = <Icon type="loading" style={{fontSize:24}}/>
        const iconLoaing = <Icon type="loading" style={{fontSize:24}}/>
        return(
            <div>
                <Card title="Spin用法" className="card-warp">
                    <Spin size="small"/>
                    <Spin style={{margin:'0 10px'}}/>
                    <Spin size="large"/>
                    <Spin indicator={icon} style={{marginLeft:10}}/>
                </Card>
                <Card title="内容遮罩" className="card-warp">
                    <Alert
                        message="React"
                        description="hello spin"
                        type="info"
                    ></Alert>
                    <Spin>
                    <Alert
                        message="React"
                        description="hello spin"
                        type="info"
                    ></Alert>
                    </Spin>
                    <Spin tip="加载中...">
                    <Alert
                        message="React"
                        description="hello spin"
                        type="info"
                    ></Alert>
                    </Spin>
                    <Spin indicator={iconLoaing} tip="加载中...">
                    <Alert
                        message="React"
                        description="hello spin"
                        type="info"
                    ></Alert>
                    </Spin>
                </Card>
            </div>
        );
    }
}
